<template>
    <div>

      <div class="goodsbox">
         <ul>
           <li class="boxlist">
             <router-link to @click.native="toplook()">
                <img src="http://static.ruitaowang.com/attached/file/2019/04/23/20190423174503180.jpg">
                <div>特尔特鹿血酒单支官方建议零售价121</div>
             </router-link>
            <router-link to class="bomrouter" @click.native="bomlook()">
              <div class="bomnew">
               <div>￥188</div><br>
                <div class="bom_sun">原价:200</div>
                </div>
               <img src="../../assets/1_6.png">
             </router-link>
           </li>

               <li class="boxlist">
             <router-link to>
                <img src="http://static.ruitaowang.com/attached/file/2019/04/23/20190423174503180.jpg">
                <div>特尔特鹿血酒单支500</div>
             </router-link>
            <router-link to class="bomrouter">
              <div class="bomnew">
               <div>￥188</div><br>
                <div class="bom_sun">原价:200</div>
                </div>
               <img src="../../assets/1_6.png">
             </router-link>
           </li>
             <li class="boxlist">
             <router-link to>
                <img src="http://static.ruitaowang.com/attached/file/2019/04/23/20190423174503180.jpg">
                <div>特尔特鹿血酒单支500</div>
             </router-link>
            <router-link to class="bomrouter">
              <div class="bomnew">
               <div>￥188</div><br>
                <div class="bom_sun">原价:200</div>
                </div>
               <img src="../../assets/1_6.png">
             </router-link>
           </li>
             <li class="boxlist">
             <router-link to>
                <img src="http://static.ruitaowang.com/attached/file/2019/04/23/20190423174503180.jpg">
                <div>特尔特鹿血酒单支500</div>
             </router-link>
            <router-link to class="bomrouter">
              <div class="bomnew">
               <div>￥188</div><br>
                <div class="bom_sun">原价:200</div>
                </div>
               <img src="../../assets/1_6.png">
             </router-link>
           </li>
         </ul>
      </div>
      <ul style="background:white;"
  v-infinite-scroll="loadMore"
  infinite-scroll-disabled="loading"
  infinite-scroll-distance="10">
  <li v-for="item in list" :key="item.length">{{ item }}</li>
    <div class="loading" v-if="loading">
         <span id="load-text">{{loadText}}</span>
      </div>
  </ul>
    </div>
</template>

<script>
 import { InfiniteScroll } from "mint-ui";
export default {
   components: {
     [InfiniteScroll.name]: InfiniteScroll,
  },
     data () {
        return {
           list:[1,2,3,4],
      loading:false,
      loadText:'加载中....'
        }
    },
    mounted(){  
        this.info()
    },
    methods:{
      loadMore() {
    console.log(9999)
    if(this.list.length>40){
      this.loading=true
      this.loadText='已加载全部数据'
    }else{
      this.loading=true
          setTimeout(() => {
        let last = this.list[this.list.length - 1];
        for (let i = 1; i <= 10; i++) {
          this.list.push(last + i);
        }
        this.loading = false;
      }, 2500);
    }
      
    },
          info(){

          },
          toplook(){

          },
          bomlook(){
            
          }
    }
}
</script>

<style scoped>
@import "../../assets/personal/css/new_baokuan.css";
</style>
